<template>
	<view class="layout">
		<input type="text" v-model="obj.name" placeholder="请输入姓名">
		<input type="text" v-model="obj.age" placeholder="请输入年龄">
		<input type="text" v-model="obj.gender" placeholder="请输入性别">
		<input type="text" v-model="obj.like" placeholder="请输入爱好">
		<button type="primary" :disabled="state" @click="onSubmit">提交</button>
	</view>
</template>

<script setup>
	/*
	判断数组中所有元素是否满足函数中给定的条件，
	全部满足返回true,只要有一项不满足则返回false。
	*/

import { computed, ref } from 'vue';

   
   
   //数组元素都大于零为true
   let arrs = [1, 2, 3, 4, 5];
   const result = arrs.every(item=>item>0)
   console.log(result);
   
   //2.检测数组对象中，是否所有商品都有库存
   let arrs2 = [{name:"华为",price:5899,stock:true},{name:"苹果",price:9999,stock:false},{name:"小米",price:4399,stock:true},{name:"红米",price:899,stock:true}];
   const result2 = arrs2.every(item=>item.stock)
   console.log(result2);
   
   //3.检测对象内所有属性是否都有值，配合Object.values()
   const  obj = ref({
   	name:"",
   	age:"",
   	gender:"",
   	like:""
   })
   
   const state = computed(()=>{
		return !Object.values(obj.value).every(item=>item)	   
		}
   )
   const onSubmit = function(){
	   console.log("提交");
	   console.log({...obj.value});
   }
</script>

<style lang="scss" scoped>
	.layout{
		padding:30rpx;
		input{
			border:1px solid #e4e4e4;
			height: 80rpx;
			margin-bottom:20rpx;
			padding:0 20rpx;
		}
	}
       
</style>
